<nz-spin [nzSpinning]="isSpinning">
    <div class='sftp-filelist-title'>
        <span class='listtype'>{{listType}}</span>
        <input nz-input [(ngModel)]="path" (keydown)="inputChanged($event)" spellcheck="false" />
        <nz-button-group class='btnlist' style='text-align:right;'>
            <button nz-button nzType="text" (click)="onRefresh()"><i nz-icon nzType="sync" nzTheme="outline"></i></button>
            <button nz-button nzType="text" (click)="onUpdir()"><i nz-icon nzType="rollback" nzTheme="outline"></i></button>
            <nz-switch *ngIf="listType=='Local'" nzSize="small" [(ngModel)]="fileSync" (ngModelChange)="fileSyncChange($event)"></nz-switch>
            <!--button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menuBatch"><i nz-icon nzType="more" nzTheme="outline"></i></button>
            <nz-dropdown-menu #menuBatch="nzDropdownMenu">
                <ul nz-menu>
                    <li *ngIf="listType=='Local'" nz-menu-item (click)="onFileBatchOper('updown')"><i nz-icon nzType="cloud-upload" nzTheme="outline"></i>Upload</li>
                    <li *ngIf="listType=='Remote'" nz-menu-item (click)="onFileBatchOper('updown')"><i nz-icon nzType="cloud-download" nzTheme="outline"></i>Download</li>
                    <li nz-menu-item (click)="onFileBatchOper('delete')"><i nz-icon nzType="folder-add" nzTheme="outline"></i>New Directoy</li>
                    <li nz-menu-item (click)="onFileBatchOper('delete')"><i nz-icon nzType="file-add" nzTheme="outline"></i>New File</li>
                    <li nz-menu-item (click)="onFileBatchOper('delete')"><i nz-icon nzType="delete" nzTheme="outline"></i>Delete</li>
                </ul>
            </nz-dropdown-menu-->
        </nz-button-group>
    </div>
    <!--<nz-table #nzTable nzSize="small " [nzData]="files " [nzShowPagination]="false " [nzFrontPagination]="false " [nzScroll]="tableSize ">-->
    <nz-table #nzTable nzSize="small" [(nzData)]="files" [nzShowPagination]="false" nzTableLayout="fixed" [nzPageSize]="10000" [nzScroll]="tableSize">
        <thead>
            <tr>
                <th [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" [nzWidth]="'30px'" (nzCheckedChange)='checkAll($event)'></th>
                <th [nzSortFn]="typeSortFn" nzSortPriority=4 [nzWidth]="'30px'" nzSortOrder="descend"></th>
                <th [nzSortFn]="nameSortFn" nzSortPriority=3 [(nzSortOrder)]="sortOrder['name']" (nzSortOrderChange)="sortOrderChange('name')" [nzWidth]="nameWidth">Name</th>
                <th [nzSortFn]="sizeSortFn" nzSortPriority=2 [(nzSortOrder)]="sortOrder['size']" (nzSortOrderChange)="sortOrderChange('size')" [nzWidth]="'100px'">Size</th>
                <th [nzSortFn]="timeSortFn" nzSortPriority=1 [(nzSortOrder)]="sortOrder['time']" (nzSortOrderChange)="sortOrderChange('time')" [nzWidth]="'160px'">Modify</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let file of nzTable.data; let i=index" [ngClass]="{'row-selected':selectedIndex === i}" (click)='click(i)' (dblclick)='dblClick(file, i)' (mousedown)='mousedown($event, file, i)' (mouseenter)='mouseenter($event, file)' (mouseout)='mouseout($event, file)'
                (contextmenu)='contextMenu($event, operMenu, i)'>
                <nz-dropdown-menu #operMenu="nzDropdownMenu">
                    <ul nz-menu>
                        <li *ngIf="listType=='Local'" nz-menu-item (click)="updown(file)"><i nz-icon nzType="cloud-upload" nzTheme="outline"></i>Upload</li>
                        <li *ngIf="listType=='Remote'" nz-menu-item (click)="updown(file)"><i nz-icon nzType="cloud-download" nzTheme="outline"></i>Download</li>
                        <li nz-menu-item (click)="addFolder()"><i nz-icon nzType="folder-add" nzTheme="outline"></i>New Directoy</li>
                        <li nz-menu-item (click)="rename(file, i)"><i nz-icon nzType="edit" nzTheme="outline"></i>Rename</li>
                        <li nz-menu-item (click)="delete(file, i)"><i nz-icon nzType="delete" nzTheme="outline"></i>Delete</li>
                    </ul>
                </nz-dropdown-menu>
                <td [(nzChecked)]="file.checked" (nzCheckedChange)="checkOne(file, $event)"></td>
                <td>
                    <span>
                        <i *ngIf="file.type=='d'"  nz-icon nzType="folder" nzTheme="fill"></i>
                        <i *ngIf="file.type=='-'" nz-icon nzType="file" nzTheme="outline"></i>
                        <i *ngIf="file.type=='l'" nz-icon nzType="link" nzTheme="outline"></i>
                    </span>
                </td>
                <ng-container *ngIf="!isEditable(i); else editTemplate">
                    <td nzEllipsis>{{ file.name }}</td>
                </ng-container>
                <ng-template #editTemplate>
                    <td><input class="filenameInput" type="text" nz-input [ngModel]="file.name" (ngModelChange)="filenameChanged($event)" (keydown)="onInputKeyDown($event)" spellcheck="false" /></td>
                </ng-template>
                <td>{{ file.size }}</td>
                <td>{{ file.mtime }}</td>
            </tr>
        </tbody>
    </nz-table>
</nz-spin>
<ng-template #tplNewFile>
    <input type="text" nz-input [(ngModel)]="newFileName" spellcheck="false" />
</ng-template>
<ng-template #tplFileSync>
    <form nz-form>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">From</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <input type="text" nz-input [(ngModel)]="path" name="from" spellcheck="false" [disabled]="true" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">To</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <input type="text" nz-input [(ngModel)]="remoteSyncPath" name="to" spellcheck="false" />
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>
<nz-dropdown-menu #operMenuNewFile="nzDropdownMenu">
    <ul nz-menu>
        <li nz-menu-item (click)="addFolder()"><i nz-icon nzType="folder-add" nzTheme="outline"></i>New Directoy</li>
    </ul>
</nz-dropdown-menu>